<template>
  <div>
    <van-nav-bar fixed safe-area-inset-top title="keep-alive" left-arrow @click-left="$router.back()" />
    <van-cell-group>
      <van-field
        clickable
        label="手机号:"
        placeholder="请输入手机号"
        :value="value"
        @touchstart.native.stop="show = true"
      />
      <van-cell title="svg图标:">
        <template #right-icon>
          <svg-icon name="spinner" color="red" spin></svg-icon>
        </template>
      </van-cell>
    </van-cell-group>

    <van-button class="next-step" type="info" block round @click="$router.push('/test')">下一步</van-button>
    <van-number-keyboard v-model="value" :show="show" :maxlength="11" safe-area-inset-bottom @blur="show = false" />
  </div>
</template>

<script>
export default {
  name: 'Detail',
  data() {
    return {
      show: false,
      value: ''
    }
  }
}
</script>

<style lang="less" scoped>
.next-step {
  margin: 10px 20px 0 20px;
  width: calc(~'100% - 40px');
}
</style>
